<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui"
    />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="/static/css/reset.css" />
    <link rel="stylesheet" href="/static/css/all.css" />
    <title>搜索</title>
  </head>
  <body>
    <div id="app" :style="{width:screen_width}" v-cloak>
      <div class="Swipe Swipe_full Destructor">
        <div :style="{width:screen_width}">
          <%- include('include/common-header.html', {nav: '搜索'}) %>
          <div
            class="Swipe Swipe_full container-scroll Destructor"
            style="height:calc(100vh-45px);top:45px;"
          >
            <div class="h100">
              <div class="h100" id="app_search">
                <div class="search">
                  <div class="top">
                    <div id="search-input" class="search-input">
                      <b class="search-input__mi"></b>
                      <input
                        type="text"
                        value=""
                        id="search_box"
                        placeholder="输入书名/作者/关键字"
                        @keyup.enter="doSearch"
                      />
                      <div class="search-input__btn" @click="doSearch">
                        搜索
                      </div>
                    </div>
                  </div>
                  <div class="top__bd y-scroll" v-show="condition">
                    <div class="h100">
                      <ul class="m-tag -color search-tag">
                        <li class="u-tag" id="Tag__128">我的绝美女神老婆</li>
                        <li class="u-tag" id="Tag__129">复仇千金</li>
                        <li class="u-tag" id="Tag__130">盗墓</li>
                        <li class="u-tag" id="Tag__131">豪门小老婆</li>
                        <li class="u-tag" id="Tag__132">庶女</li>
                        <li class="u-tag" id="Tag__133">神医</li>
                        <li class="u-tag" id="Tag__134">魔兽</li>
                        <li class="u-tag" id="Tag__135">我的老婆是双胞胎</li>
                      </ul>
                    </div>
                  </div>
                  <div class="top__bd y-scroll" v-show="!condition">
                    <ul class="book-list">
                      <li v-for="item in search">
                        <div class="u-book">
                          <div class="cnt">
                            <div class="book-cover">
                              <img :alt="item.title" :src="item.cover" />
                              <div class="u-tagRT"></div>
                            </div>
                            <div class="info">
                              <h3 class="title single-line">
                                {{ item.title }}
                              </h3>
                              <p class="summary">{{ item.intro }}</p>
                              <div class="wrap">
                                <p class="author single-line">
                                  <span>{{ item.authors }}</span>
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                    <div class="ListView ListView_complete" v-show="empty">
                      <div class="ListView__empty">
                        <p class="u-tip">没有相应的搜索结果</p>
                      </div>
                      <div class="ListView__complete"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="/static/script/vue.js"></script>
    <script src="/static/script/zepto.js"></script>
    <script src="/static/script/page/search.js"></script>
  </body>
</html>
